<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-07-18 15:29:41
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-07-25 17:32:49
 * @Description:
 *
-->
<template>
  <div class="graph-cloud-config">
    <el-form
      ref="form"
      :rules="rules"
      :model="form"
      size="medium"
      label-width="auto"
    >
      <el-form-item label="云服务商" prop="cloudProvider">
        <el-select
          v-model="form.cloudProvider"
          placeholder="请选择云服务商"
          style="width: 100%"
          :disabled="hasSetting"
          @change="cloudProviderChange"
        >
          <el-option
            v-for="item in cloudProviderOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="云账户" prop="cloudAccountName">
        <el-select
          v-model="form.cloudAccountName"
          placeholder="请选择云账户"
          style="width: 100%"
          :disabled="hasSetting"
          no-data-text="请先选择合适的云服务商"
          :loading="loadingCloudAccountName"
        >
          <el-option
            v-for="item in cloudAccountNameOptions"
            :key="item.cloudAccountName"
            :label="item.cloudAccountName"
            :value="item.cloudAccountName"
          />
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { CLUSTER_ALL, isCloudPublic } from '@/utils/constant'
import { getPublicTokenList, getPrivateAccountList } from '@/api/cn-mgmt'

export default {
  mixins: [],
  props: ['params', 'GraphApi', 'cell'],
  data() {
    return {
      cloudProviderOptions: CLUSTER_ALL,
      loadingCloudAccountName: false,
      cloudAccountNameOptions: [], // 云账户
      form: {
        cloudProvider: '',
        cloudAccountName: ''
      },
      // 校验规则
      rules: {
        cloudProvider: [
          { required: true, message: '请选择云服务商', trigger: 'change' }
        ],
        cloudAccountName: [
          { required: true, message: '请选择云账户', trigger: 'change' }
        ]
      },
      hasSetting: false
    }
  },
  computed: {
    /**
     * @description: 当前选择是否公有云
     * @return {*}
     */
    isCloudProviderPublic() {
      return isCloudPublic(this.form.cloudProvider)
    }
  },
  watch: {},
  mounted() {
    this.form = Object.assign(this.form, this.params.attribute || {})
    if (this.form.cloudProvider) {
      this.getCloudAccountNameList()
    }
    if (this.params.attribute && this.params.attribute.cloudProvider) {
      this.hasSetting = true
    }
  },
  methods: {
    /**
     * @description: 保存配置
     * @param {*} callback
     * @return {*}
     */
    saveConfig(callback) {
      this.$refs.form.validate((valid, obj) => {
        if (valid) {
          const businessData = JSON.parse(JSON.stringify(this.params))
          businessData.attribute = this.form
          this.GraphApi.setObjectData(
            this.params.id,
            JSON.stringify(businessData)
          )
          this.GraphApi.addCloudOverlay(this.cell)
          this.cell.setValue('')
          this.GraphApi.refresh(this.cell)
          callback()
        }
      })
    },
    /**
     * @description: 云商切换
     * @param {*} val
     * @return {*}
     */
    cloudProviderChange(val) {
      this.form.cloudAccountName = ''
      this.getCloudAccountNameList()
    },
    /**
     * @description: 获取云账户
     * @return {*}
     */
    getCloudAccountNameList() {
      this.loadingCloudAccountName = true
      if (this.isCloudProviderPublic) {
        // 公有云
        getPublicTokenList({
          keyword: this.form ? this.form.cloudProvider : '',
          pageNum: 1,
          pageSize: 100
        })
          .then((res) => {
            if (res.data) {
              this.cloudAccountNameOptions = Array.isArray(res.data.data)
                ? res.data.data
                : []
            } else {
              this.cloudAccountNameOptions = []
            }
          })
          .finally(() => {
            this.loadingCloudAccountName = false
          })
      } else {
        // 私有云
        getPrivateAccountList({
          keyword: this.formCloudProvider,
          pageNum: 1,
          pageSize: 100
        })
          .then((res) => {
            if (res.data) {
              this.cloudAccountNameOptions = Array.isArray(res.data.data)
                ? res.data.data
                : []
            } else {
              this.cloudAccountNameOptions = []
            }
          })
          .finally(() => {
            this.loadingCloudAccountName = false
          })
      }
    }
  }
}
</script>
